<!-- 床边动态心电查询报表 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form
        ref="ruleForm"
        :model="formData"
        :inline="true"
        class="ky-form-inline ky-form-inline-sm"
        :rules="rules"
        label-width="84px"
      >
        <el-form-item label="开单时间:" prop="timeRange">
          <el-date-picker
            v-model="formData.timeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button> -->
          <el-button
            type="primary"
            class="m-l-0 click-button"
            size="small"
            @click="search"
            icon="el-icon-search"
            :loading="dataLoading"
          >查询</el-button>
          <el-button
            :loading="dataLoading||downloadLoading"
            size="small"
            type="danger"
            icon="el-icon-download"
            @click="handleDownload"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <el-table
        ref="table"
        v-loading="dataLoading"
        size="medium"
        :data="tableData"
        border
        :max-height="computedHeight"
        :header-cell-style="{background:'#00c0ef', color:'#fff',fontWeight:'bold'}"
      >
        <el-table-column align="center" prop="APPOINTMENT_TIME" label="预约时间"></el-table-column>
        <el-table-column align="center" prop="INPATIENT_ID" label="住院号"></el-table-column>
        <el-table-column align="center" prop="PAT_NAME" label="病人姓名"></el-table-column>
        <el-table-column align="center" prop="PAT_SEX" label="性别"></el-table-column>
        <el-table-column align="center" prop="WARDNO" label="病区"></el-table-column>
        <el-table-column align="center" prop="BEDNO" label="床位"></el-table-column>
        <el-table-column align="center" prop="BILLING_DOCTOR" label="开单医生"></el-table-column>
        <el-table-column align="center" prop="BILLING_TIME" label="开单时间"></el-table-column>
        <el-table-column align="center" prop="STATUS" label="状态"></el-table-column>
        <el-table-column align="center" prop="CHECKPOS" label="检查部位"></el-table-column>
        <el-table-column align="center" prop="CLINICINFO" label="主述"></el-table-column>
        <el-table-column align="center" prop="CLINICEND" label="临床诊断"></el-table-column>
      </el-table>
    </el-card>
    <div class="pagination">
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="getBedsideDynamicECG"
      />
    </div>
  </div>
</template>

<script>
import { dateFormatter } from '@/utils/validate'
import { getBedsideDynamicECG } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'

export default {
  name: 'TableBedsideDynamicECG',
  mixins: [],
  components: { paginationCont },

  data() {
    return {
      rules: {
        timeRange: { type: 'array', required: true, message: '请选择时间', trigger: 'change' }
      },
      formData: {
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)]
      },
      dataLoading: false,
      downloadLoading: false,
      tableData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {},
  computed: {
    computedHeight() {
      let height = window.innerHeight - 250
      return height
    }
  },
  created() {
  },
  mounted() {
    this.search()
  },
  methods: {
    resetParam() {
      // 重置
      this.formData = {
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)]
      }
    },
    search() {
      // 查询
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      let data = {
        dateArr: this.formData.timeRange.join(','),
        pageIndex: 1,
        pageSize: 999999999
      }
      getBedsideDynamicECG(data).then(async res => {
        this.downloadLoading = false
        if (!res) return
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['预约时间', '住院号', '病人姓名', '性别', '病区', '床位', '开单医生', '开单时间', '状态', '检查部位', '主述', '临床诊断']
          const filterVal = ['APPOINTMENT_TIME', 'INPATIENT_ID', 'PAT_NAME', 'PAT_SEX', 'WARDNO', 'BEDNO', 'BILLING_DOCTOR', 'BILLING_TIME', 'STATUS', 'CHECKPOS', 'CLINICINFO', 'CLINICEND']
          const list = res.Content.items
          this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data: this.excelData,
            filename: '床边动态心电查询报表',
            autoWidth: true
          })
          this.downloadLoading = false
        })
      }).catch(() => {
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      this.excelData = []
      jsonData.map((v, index) => {
        let tempArr = []
        filterVal.map(j => {
          if (v[j] || v[j] === 0) {
            if (j != 'children') {
              tempArr.push(v[j])
            } else {
              // 如果有children进行遍历
              this.formatJson(filterVal, v.children)
            }
          } else {
            tempArr.push('-')
          }
        })
        // console.log(tempArr)
        this.excelData.push(tempArr)
      })
    },
    fetchData() {
      this.dataLoading = true
      let data = {
        dateArr: this.formData.timeRange.join(','),
        pageIndex: this.currentPage,
        pageSize: this.pageSize
      }
      getBedsideDynamicECG(data).then(async res => {
        this.dataLoading = false
        if (!res) return
        this.tableData = res.Content.items
        this.totalCount = res.Content.count
      }).catch(() => {
        this.dataLoading = false
      })
    }
  },
  beforeDestroy() { },
  destroyed() { },
  beforeUpdate() { },
  updated() { }
}
</script>
<style lang='scss' scoped>
.ky-container {
  .param-type_input {
    /deep/ .el-input__inner {
      width: 180px;
    }
  }
  .content-title {
    margin-left: 4px;
    margin-bottom: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}
>>> .el-table__footer-wrapper tbody td,
>>> .el-table__header-wrapper tbody td {
  background-color: #01c0ef;
  color: #fff;
}

>>> .el-table__fixed-footer-wrapper tbody td {
  // border-top: 1px solid #01c0ef;
  background-color: #01c0ef;
  color: #fff;
}
// .ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner {
//   width: 456px;
// }
</style>

